<template>
    <el-tabs v-model="activeName" type="card"  @tab-click="handleClick" style="padding: 10px;">
      <el-tab-pane label="计划列表" name="first" class="table-tab">
        <list-page></list-page>
      </el-tab-pane>
      <el-tab-pane label="与我相关" name="second" class="table-tab">
        <my-page></my-page>
      </el-tab-pane>
      <el-tab-pane label="计划明细" name="third" class="table-tab">
        <detail-page></detail-page>
      </el-tab-pane>
    </el-tabs>
</template>

<script>
  import listPage from "./list.vue"
  import detailPage from "./detail.vue"
  import myPage from "./my.vue"

  export default {
    components:{
      listPage,detailPage,myPage
    },
    data() {
      return {
        activeName: 'first'
      };
    },
    methods: {
      handleClick(tab, event) {
        console.log(tab, event);
      }
    }
  };
</script>

<style>
  .el-tabs__item{
    height: 20px;line-height: 20px;font-size: 12px;
  }
</style>
